//1.引入样式表
//公用样式 
require('../../assets/css/index.less');
require('../../assets/fonts/iconfont.css');

// 引入weUI
//引入样式
require('../../lib/weui/weui.css');
//引入js库
let weui = require('../../lib/weui/weui.js');


// 当前页面样式
require('./courseList.less')

//2.引入工具函数 utils
const dom = require('../../utils/dom');
const https = require('../../utils/https');
const local = require('../../utils/local');

// 3.当前页面的js
dom.ready(function () {
    //加载底部菜单
    dom.bMenu('sport')

    //获取课程列表
    function getCourseList() {
        https.get('/api/train/courseList', function (res) {
            //解构赋值
            let { errno, data } = res;
            //判定
            if (errno == 0) {
                console.log(data);
                //处理数据
                //最新课程数据
                let newCourse = data.filter(v => v.courseId == 1);
                rander('#newBox', newCourse)

                //获取课程数据
                let courseList = data.filter(v => v.courseId > 1);
                rander('#listBox', courseList)
            }
        })
    }

    //调用
    getCourseList()

    //封装一个渲染函数
    function rander(obj, data) {
        //拼接html结构
        //定义一个变量保存html结构
        let htmlStr = '';
        //遍历
        data.map(v => {
            // 方式一: 使用a标签情况
            // htmlStr += `<li>
            //        <a href="courseDetails.html?id=${v.courseId}">
            //         <img src="http://fitness.h5.itsource.cn:3701${v.imgurl}" alt="">
            //         <div class="title">
            //             <h4>${v.name}</h4>
            //             <p class="c9a">${v.desc}</p>
            //         </div>
            //        </a>
            //       </li>`


            //方式二: 使用本地存储---1.先把指定数据保存到某个标签上
            htmlStr += `<li >
            <img data-id="${v.courseId}" src="http://fitness.h5.itsource.cn:3701${v.imgurl}" alt="">
            <div class="title">
                <h4>${v.name}</h4>
                <p class="c9a">${v.desc}</p>
            </div>
           </li>`
        })
        //添加到指定位置
        dom.getEle(obj).innerHTML = htmlStr;
    }


//方式二: 使用本地存储---2.实现点击事件
    dom.addEvent('#newBox',function(event){
        // console.log(event.target.nodeName);
        //判定
        if(event.target.nodeName=='IMG'){
            //获取img标签上的data-id属性的值
            //h5使用方式
            // let val=event.target.dataset['id'];
            // let val=event.target.dataset.id;

            //原生js使用方式
            let val=event.target.getAttribute('data-id');

            //保存到本地
            // local.set('id',val);
            // location.href='courseDetails.html'
            
              //方式三
            //跳转到B页面
            location.href='courseDetails.html?id='+val

            console.log(val);
        }
    })



})